<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <!-- 当图片出现在视口以内 ,开始加载 -->
  <script>
    let imgList = [...document.querySelectorAll("img")];
    let len = imgList.length;
    let lazyLoad = function () {
      // count ? 闭包 
      let count = 0;
      return (function () {
        let deleteIndex = [];
        imgList.forEach((img, idx) => {
          // 获取位置
          let rect = img.getBoundingClientRect();
          if (rect.top < window.innerHeight) {
            // 开始加载
            img.src = img.dataset.src;
            deleteIndex.push(idx); // 已加载图片数组索引
            count++;
          }
          // 图片加载完 移除滚动监听
          if (count == len) {
            document.removeEventListener("scroll", lazyLoad);
          }
        });
        imgList.filter((img, idx) => {
          return !deleteIndex.includes(idx);
        });
      });
    }();
    document.addEventListener("scroll", lazyLoad);



    // 观察者模式
    let lazy = function () {
      let observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.intersectionRatio > 0) {
            entry.target.src = entry.target.dataset.src;
            observe.unobserve(entry.target)
          }
        })
      })
      imgList.forEach(img => {
        observer.observe(img)
      })
    }
    // IntersectionObserver 的实现方式，实例化一个 IntersectionObserver ，并使其观察所有 img 标签
    // 当 img 标签进入可视区域时会执行实例化时的回调，同时给回调传入一个 entries 参数，保存着实例观察的所有元素的一些状态，比如每个元素的边界信息，当前元素对应的 DOM 节点，当前元素进入可视区域的比率，每当一个元素进入可视区域，将真正的图片赋值给当前 img 标签，同时解除对其的观察

  </script>
</body>

</html>